import React, { Component } from 'react'
import cityData from './cityData'
// import updateSpecialty from './updateSpecialty'
import { Table, Tag, Button, Modal, Form, Input, Select} from 'antd';

import axios from 'axios';
import './SpecialtyCss.css'
const { Option } = Select



export default class Specialty extends Component {
    state={
        nowItem:{},
        datalist : [
        ],
        cityName:'',
        updateVisible: false,
        visible: false,
        columns :[
            {
              title: '特产名称',
              dataIndex: 'name',
              key: 'name'
            },
            {
              title: '特产价格',
              dataIndex: 'price',
              key: 'apricege',
            },
            {
              title: '城市',
              dataIndex: 'city',
              key: 'city',
            },
            {
              title: '注意事项',
              key: 'explain',
              dataIndex: 'explain',
            },
            {
              title: '操作',
              key: 'action',
              render:item=>{
                  return (
                    <div>
                        <Tag color="green" onClick={()=>this.updateSpecialty(item)}>更新</Tag>
                        <Tag color="red" onClick={()=>this.deleteSpecialty(item)}>删除</Tag>
                    </div>
                  )
              }
            },
        ]
    }
    render() {
        return (
            <div>
                <Tag color="#108ee9" style={{
                    width:"300px",
                    height:"40px",
                    marginBottom:"30px",
                    marginLeft:"30%" ,
                    textAlign:"center",
                    lineHeight:"40px",
                    fontSize:"22px"          
                }}>特产表格</Tag>
               <Table columns={this.state.columns} dataSource={this.state.datalist} rowKey={item=>item.id} pagination={{pageSize:6}}/>
               <Button type="dashed" danger onClick={this.AddSpecialty}>新增</Button>
               {/* 新增对话框 */}
               <Modal
                title="新增特产"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                >
                     <Form
                    layout="vertical"
                    name="form_in_modal"
                    initialValues={{ modifier: 'public' }}
                    ref="addSpecialtyFrom"
                    >
                        <Form.Item
                        name="name"
                        label="特产名称"
                        rules={[{ required: true, message: 'Please input the title of collection!' }]}
                        >
                        <Input />
                        </Form.Item>

                        <Form.Item name="price" 
                        label="特产价格">
                        <Input />
                        </Form.Item>

                        <Form.Item name="explain" label="注意事项" >
                            <Input type="textarea"/>
                        </Form.Item>

                        <Form.Item  label="城市" >
                            {/* 选择器 */}
                            <Select
                                showSearch
                                style={{ width: 200 }}
                                placeholder="请选择特产所属城市"
                                onChange={this.onChange}
                            >
                                {
                                    cityData.map((item,index)=>{
                                        return (<Option value={item} key={index}>{item}</Option>)
                                    })
                                }
                            </Select>,
                        </Form.Item>
                    </Form>
                </Modal>

                 {/* 更新对话框 */}
               <Modal
                title="新增特产"
                visible={this.state.updateVisible}
                onOk={this.UpdatehandleOk}
                onCancel={this.UpdatehandleCancel}
                >
                     <Form
                    layout="vertical"
                    name="form_in_modal"
                    initialValues={{ modifier: 'public' }}
                    ref="updateSpecialtyFrom"
                    >
                        <Form.Item
                        name="name"
                        label="特产名称"
                        rules={[{ required: true, message: 'Please input the title of collection!' }]}
                        >
                        <Input />
                        </Form.Item>

                        <Form.Item name="price" 
                        label="特产价格">
                        <Input />
                        </Form.Item>

                        <Form.Item name="explain" label="注意事项" >
                            <Input type="textarea"/>
                            
                        </Form.Item>

                        <Form.Item  label="城市" >
                            {/* 选择器 */}
                            <Select
                                showSearch
                                style={{ width: 200 }}
                                placeholder="请选择特产所属城市"
                                onChange={this.onChange}
                                value={this.state.cityName}
                            >
                                {
                                    cityData.map((item,index)=>{
                                        return (<Option value={item} key={index}>{item}</Option>)
                                    })
                                }
                            </Select>,
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
    //获取原始数据
    componentDidMount() {
        axios.get("http://localhost:5000/dishes").then(res=>{
            this.setState({
                datalist:res.data
            })
        })
    }
    //==============新增============
    AddSpecialty=()=>{
        this.setState({
            visible: true,
        });
    }
    handleOk = e => {
        this.refs.addSpecialtyFrom.validateFields().then(res=>{
            // console.log(res)
            axios.post("http://localhost:5000/dishes",{
                ...res,
                city:this.state.cityName
            }).then(res=>{
                console.log(res)
                this.setState({
                    visible: false,
                    datalist:[...this.state.datalist,res.data]
                })
                this.refs.addSpecialtyFrom.resetFields()
            })
        })
      };
      handleCancel = e => {
        this.setState({
          visible: false,
        });
      };
      //选择器
      onChange=(value)=> {
          this.setState({
            cityName:value
          })
      }
    //=============新增==============
    //=============删除=============
    deleteSpecialty=(item)=>{
        // console.log(item)
        axios.delete(`http://localhost:5000/dishes/${item.id}`).then(res=>{
            // console.log(res)
            this.setState({
                datalist:this.state.datalist.filter(data=>data.id!==item.id)
            })
        })
    }
    //=============删除=============
    //=============更新=============
    updateSpecialty=(item)=>{
        this.setState({
            updateVisible: true,
            nowItem:item
        })
       axios.get(`http://localhost:5000/dishes?id=${item.id}`).then(res=>{
            var temp = res.data[0]
            this.refs.updateSpecialtyFrom.setFieldsValue({
                name:temp.name,
                price:temp.price,
                explain:temp.explain,
                })
            // console.log(temp.city)
            this.setState({
                cityName:temp.city
            })
       })
    }
        UpdatehandleOk = e => {
            this.refs.updateSpecialtyFrom.validateFields().then(res=>{
                // console.log(res)
                axios.put(`http://localhost:5000/dishes/${this.state.nowItem.id}`,{
                    ...res,
                    city:this.state.cityName
                }).then(res=>{
                    // console.log(res)
                    this.setState({
                        updateVisible: false,
                        datalist:this.state.datalist.map(item=>{
                            if(item.id===this.state.nowItem.id){
                               return res.data
                            }else{
                              return item
                            }
                          })
                    })
                    this.refs.updateSpecialtyFrom.resetFields()
                   
                })
                
            })
      };

      UpdatehandleCancel = e => {
        this.setState({
            updateVisible: false,
        });
      };
      //选择器
      onChange=(value)=> {
          this.setState({
            cityName:value
          })
      }
    //=============更新=============
}
